<template>
  <div>
    <el-autocomplete
      v-model="state"
      :fetch-suggestions="querySearchAsync"
      placeholder="请输入内容"
      @select="handleSelect"
    ></el-autocomplete>
    {{ date }}
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped></style>

<script>
export default {
  data() {
    return {
      date:[],
      restaurants: [],
      state: '',
      timeout:  null
    };
  },
  computed: {
    val() {
      return this.restaurants.map(item=>{
        let newItem = JSON.parse(JSON.stringify(item).replace('aaa','value'))
        this.date = newItem
        console.log('this.date',this.date)
        // const newItem = {
        //   id : item.id,
        //   value : item.aaa,
        //   actor_avatar : item.actor_avatar
        // }
        // this.date = newItem
        // console.log('date',this.date)
        // item.keys.replace('aaa'','')
      })
    },
  },
  methods: {
    loadAll() {
      return [
      {"id":2940,"value":"亚历克斯·威克索","actor_avatar":"https://p0.meituan.net/movie/52933b072c65ada02d79febc0395b48074496.jpg@128w_170h_1e_1c"},{"id":2941,"aaa":"丹兹尔·史密斯","actor_avatar":"https://p1.meituan.net/movie/2b2e87b4365fb734766cc68c7e4e1cc79952.jpg@128w_170h_1e_1c"},{"id":2942,"aaa":"马塞尔·萨巴特","actor_avatar":"https://p1.meituan.net/movie/1b2e2e515696241ea4ef54d12cb13cc662137.jpg@128w_170h_1e_1c"},{"id":2944,"aaa":"菲奥娜·道里夫","actor_avatar":"https://p1.meituan.net/movie/e70cbf9c79e9067abe31ab926bc8867638722.jpg@128w_170h_1e_1c"},{"id":2945,"aaa":"约翰·威斯利·查特曼","actor_avatar":"https://p0.meituan.net/movie/9759ef09d5c5ffc65ccf60dd84c28c57177377.jpg@128w_170h_1e_1c"},
      ];
    },
    querySearchAsync(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 3000 * Math.random());
    },
    createStateFilter(queryString) {
      console.log('queryString',queryString)
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        // return (state.actor_avatar.include(...(this.state).actor_avatar));
        // return (state.actor_avatar === this.state);
      };
    },
    handleSelect(item) {
      console.log(item);
    }
  },
  mounted() {
    // this.restaurants = this.loadAll()
    console.log(this.loadAll())
    this.loadAll().map(item=>{
        let newItem = JSON.parse(JSON.stringify(item).replace('aaa','value'))
        this.restaurants.push(newItem) 
        console.log('this.date',this.date)
        // const newItem = {
        //   id : item.id,
        //   value : item.aaa,
        //   actor_avatar : item.actor_avatar
        // }
        // this.date = newItem
        // console.log('date',this.date)
        // item.keys.replace('aaa'','')
      })
    }
}
</script>
